<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";

import baseModel from "@/components/baseModel/baseModel.vue";

const emit = defineEmits(["isClose"]);

const videoUrl = ref('')

const videoRef = ref(null)

const dialog = ref(null)

const open = (url) => {
    // 视频开始时间设为第一秒
    videoUrl.value = url
    videoRef.value && (videoRef.value.currentTime = 0)
    videoRef.value && videoRef.value.play()
    dialog.value && dialog.value.showModal()
}

const close = () => {
    videoRef.value.pause()
    dialog.value && dialog.value.closeModal()
}

const isClose = () => {
    videoRef.value.pause()
    emit('isClose')
}

defineExpose({
    open,
    close
})

</script>

<template>
    <baseModel :title="'查看视频'" ref="dialog" :contentWidth="800" :zIndex="2000" @isClose="isClose">
        <template #content>
            <div class="content" :key="videoUrl">
                <video controls autoplay ref="videoRef" class="is_video">
                    <source :src="videoUrl" type="video/mp4">
                </video>
            </div>
        </template>
        <template #footer>
            <slot name="isfooter">
                <a-button type="primary" @click="close">关闭</a-button>
            </slot>
        </template>
    </baseModel>
</template>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    background: #000000;

    video {
        height: 100%;
        width: 100%;
        background: rgb(223, 223, 223);
    }
}
</style>